<template>
  <el-drawer v-model="state.open" destroy-on-close title="错题记录" @close="close" @open="open">
    <template #default>
      <el-row :gutter="5" style="width: calc(70vw)">
        <el-col :span="6" style="border-right: 1px solid #f1f1f1">
          <el-tree ref="treeRef" :data="treeData" :expand-on-click-node="false" :props="treeProps" default-expand-all highlight-current node-key="id" @node-click="handleNodeClick">
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span>{{ node.label }}</span>
                  <span v-if="data.type != 'kemu'" style="color: tomato">
                    ( {{ data.count }} )
                  </span>
                </span>
            </template>
          </el-tree>
        </el-col>
        <el-col :span="18">
          <div style="height: calc(100vh - 250px);overflow: auto">
            <el-card v-for="(question,index) in questions" :key="'DANXUAN_'+index" class="question-content" shadow="hover" style="position: relative;margin:10px 0">
              <span style="float: left;margin-right: 5px;color: var(--el-color-info-dark-2)">第{{ this.paging.pageSize * (this.paging.currentPage - 1) + index + 1 }}题. </span>
              <div v-html="question.question"/>
              <div style="margin-top: 20px">
                <span style="color: #337ecc">练习</span>: {{ question.myTotalAnswerCount }}次
                <span style="color: #529b2e;margin-left: 20px">正确</span>: {{ question.myRightAnswerCount }}次
                <span style="color: #b88230;margin-left: 20px">正确率</span>: {{ question.myRightPercent }}%
              </div>
            </el-card>
          </div>
          <el-pagination :current-page="paging.currentPage" :default-page-size="20" :page-size="paging.pageSize" :page-sizes="[20, 50, 100]" :total="paging.totalRow" background layout="sizes, prev, pager, next" style="margin-top: 20px;margin-bottom: 20px;float: right" @size-change="sizeChange" @current-change="currentChange"/>
        </el-col>
      </el-row>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script>

export default {
  name: "Create",
  props: ['state'],
  data() {
    return {
      treeProps: {
        children: 'children',
        label: 'label',
      },
      treeData: [],
      student: null,
      wrongStatistics: null,
      clickNode: {},
      questions: [],
      paging: {currentPage: 1, pageSize: 20, totalRow: 0},
    }
  },
  methods: {
    async open() {
      this.student = await this.post('/student/get', {id: this.state.id})
      this.wrongStatistics = await this.post('/exam/wrong/statistics-for-pc', {id: this.state.id})
      for (let i = 0; i < this.student.kemu.length; i++) {
        let item = this.student.kemu[i]
        let c = this.wrongStatistics.wrongBookQuestionCount[item.code]
        if (!c) continue

        let children = []
        if (c.danXuanAnsweredWrongQuestionCount > 0) {
          children.push({
            label: '单选题',
            type: 'DANXUAN',
            code: item.code,
            count: c.danXuanAnsweredWrongQuestionCount
          })
        }
        if (c.duoXuanAnsweredWrongQuestionCount > 0) {
          children.push({
            label: '多选题',
            type: 'DUOXUAN',
            code: item.code,
            count: c.duoXuanAnsweredWrongQuestionCount
          })
        }
        if (c.tianKongAnsweredWrongQuestionCount > 0) {
          children.push({
            label: '填空题',
            type: 'TIANKONG',
            code: item.code,
            count: c.tianKongAnsweredWrongQuestionCount
          })
        }
        if (c.mingCiJieShiAnsweredWrongQuestionCount > 0) {
          children.push({
            label: '名词解释题',
            type: 'MINGCIJIESHI',
            code: item.code,
            count: c.mingCiJieShiAnsweredWrongQuestionCount
          })
        }
        if (c.lunShuAnsweredWrongQuestionCount > 0) {
          children.push({
            label: '论述题',
            type: 'LUNSHU',
            code: item.code,
            count: c.lunShuAnsweredWrongQuestionCount
          })
        }
        this.treeData.push({label: item.name, type: 'kemu', code: item.code, children: children})
      }

    },
    async listQuestion() {
      console.log(this.clickNode)
      let data = await this.post('/question/list-for-show-for-pc/' + this.state.id + '/' + this.paging.pageSize + '/' + this.paging.currentPage, {
        basicCode: this.clickNode.code,
        type: this.clickNode.type
      });
      this.questions = data.data
      this.paging.totalRow = parseInt(data.totalRow)
    },
    async handleNodeClick(data) {
      this.clickNode = data
      if (this.clickNode.type === 'kemu') {
        this.paging = {currentPage: 1, pageSize: 20, totalRow: 0}
        this.questions = []
        return;
      }
      await this.listQuestion();
    },
    sizeChange(pageSize) {
      this.paging.pageSize = pageSize;
      this.listQuestion();
    },
    currentChange(currentPage) {
      this.paging.currentPage = currentPage;
      this.listQuestion();
    },
    close() {
      this.treeData = [];
      this.student = null;
      this.wrongStatistics = null;
      this.clickNode = {};
      this.questions = [];
      this.paging = {currentPage: 1, pageSize: 20, totalRow: 0}
      this.state.open = false
      this.$refs['editForm'].resetFields()

    },
  }
}
</script>

<style scoped>
:deep(.cm-scroller) {
  min-height: calc(100vh - 520px);
}
</style>